<template>
  <div class="comments">
    <!-- 发表评论 -->
    <div class="say-comments">
      <div class="header">
        发表评论
      </div>
      <div class="content-wrap">
        <div class="toolbar"></div>
        <div class="content">
          <el-input
            type="textarea"
            :rows="5"
            v-model="comment"
            placeholder="请输入没有煽动言论的合法内容"
            resize="none"
          ></el-input>
        </div>
      </div>
      <div class="comments-footer">
        <el-button type="primary">发表</el-button>
      </div>
    </div>
    <!-- 全部评论 -->
    <div class="all-comments">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <reply-comments :list="allCommentsList"></reply-comments>
        </el-tab-pane>
        <el-tab-pane label="热门" name="second">
          <reply-comments :list="hotCommentsList"></reply-comments>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ReplyComments from './ReplyComments.vue';

export default {
  name: 'DiscountsComments',
  components: {
    ReplyComments
  },
  data() {
    return {
      comment: '',
      activeName: 'first',
      allCommentsList: [
        {
          id: 1,
          avator: 'warrant01.png',
          username: '内涵段子',
          comment: '一时想不起有啥骚段子说',
          date: '2020-07-24 10:51',
          replyList: []
        },
        {
          id: 1,
          avator: 'warrant01.png',
          username: '内涵段子',
          comment: '一时想不起有啥骚段子说',
          date: '2020-07-24 10:51',
          replyList: [{
            id: 2,
            avator: 'warrant01.png',
            username: '用户1',
            owner: '内涵段子',
            comment: '不是个合格的段子手',
            date: '2020-07-24 10:52',
          }, {
            id: 3,
            avator: 'warrant01.png',
            username: '用户2',
            owner: '内涵段子',
            comment: '不是个合格的段子手',
            date: '2020-07-24 10:53'
          }]
        }
      ],
      hotCommentsList: []
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style lang="less" scoped>
  .comments {
    margin-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #ddd;
    .say-comments {
      padding: 10px;
      .content-wrap {
        margin: 10px 0;
        padding: 10px;
        border: 1px solid #ddd;
        .content {
          margin-top: 30px;
        }
      }
      .comments-footer {
        padding-right: 10px;
        text-align: right;
      }
    }
    .all-comments {
      margin-top: 10px;
      padding: 0 10px;
    }
  }
</style>
